import { h, init } from 'snabbdom'
import style from 'snabbdom/modules/style'
import eventlisteners from 'snabbdom/modules/eventlisteners'
import {classModule} from 'snabbdom/modules/class'
import {propsModule} from 'snabbdom/modules/props'

let patch = init([
    classModule,
    propsModule,
    style,
    eventlisteners
])

let vnode;
let nextKey = 11;
let margin = 8;
let sortBy = 'rank';
let totalHeight = 0;
let originalData = [
    {
        rank: 1,
        title: 'sdfs标题1',
        desc: 'y内容1',
        elmHeight: 0
    },
    {
        rank: 2,
        title: 'vcv标题2',
        desc: 'w内容2',
        elmHeight: 0
    },
    {
        rank: 3,
        title: 'dfd标题3',
        desc: 'k内容3',
        elmHeight: 0
    },
    {
        rank: 4,
        title: 'xcx标题4',
        desc: 'f内容4',
        elmHeight: 0
    },
    {
        rank: 5,
        title: 'htgfhr标题5',
        desc: 'g内容5',
        elmHeight: 0
    },
    {
        rank: 6,
        title: 'jyjty标题6',
        desc: 'd内容6',
        elmHeight: 0
    },
    {
        rank: 7,
        title: 'jkuji标题7',
        desc: 'e内容7',
        elmHeight: 0
    },
    {
        rank: 8,
        title: 'ewer标题8',
        desc: 'c内容8',
        elmHeight: 0
    },
    {
        rank: 9,
        title: 'uoi标题9',
        desc: 'b内容9',
        elmHeight: 0
    },
    {
        rank: 10,
        title: 'grt标题10',
        desc: 'a内容10',
        elmHeight: 0
    },
];
let data = [
    originalData[0],
    originalData[1],
    originalData[2],
    originalData[3],
    originalData[4],
    originalData[5],
    originalData[6],
    originalData[7],
    originalData[8],
    originalData[9],
];

let changeSort = (prop) => {
    sortBy = prop;
    data.sort((a, b) => {
        if (a[prop] > b[prop]) {
            return 1;
        }
        if (a[prop] < b[prop]) {
            return -1;
        }
        return 0;
    });
    render();
}

let add = () => {
    let n = originalData[Math.floor(Math.random() * 10)];
    data = [{ rank: nextKey++, title: n.title, desc: n.desc, elmHeight: 0 }].concat(data);
    render();
    render();
}

let remove = (movie) => {
    data = data.filter((m) => { return m !== movie; });
    render();
}

let movieView = (movie) => {
    return h('div.row', {
        key: movie.rank,
        style: {
            opacity: '0',
            transform: 'translate(-200px)',
            delayed: {
                transform: `translateY(${movie.offset}px)`,
                opacity: '1'
            },
            remove: {
                opacity: '0',
                transform: `translateY(${movie.offset}px) translateX(200px)`
            }
        },
        hook: {
            insert: (vnode) => {
                movie.elmHeight = vnode.elm.offsetHeight;
            }
        },
    }, [
        h('div', { 
            style: { fontWeight: 'bold' } 
        }, movie.rank),
        h('div', movie.title),
        h('div', movie.desc),
        h('div.btn.rm-btn', { 
            on: { click: [remove, movie] } 
        }, 'x'),
    ]);
}

let render = () => {
    data = data.reduce((acc, m) => {
        let last = acc[acc.length - 1];
        m.offset = last ? last.offset + last.elmHeight + margin : margin;
        return acc.concat(m);
    }, []);
    totalHeight = data[data.length - 1].offset + data[data.length - 1].elmHeight;
    vnode = patch(vnode, view(data));
}

let view = (data) => {
    return h('div#container', [
        h('h2', '排名前十的电影'),
        h('div', [
            h('a.btn.add', {
                on: { click: add }
            }, '添加'),
            '排序方式: ',
            h('span.btn-group', [
                h('a.btn.rank', {
                    class: { active: sortBy === 'rank' },
                    on: { click: [changeSort, 'rank'] }
                }, '序号'),
                h('a.btn.title', {
                    class: { active: sortBy === 'title' },
                    on: { click: [changeSort, 'title'] }
                }, '标题'),
                h('a.btn.desc', {
                    class: { active: sortBy === 'desc' },
                    on: { click: [changeSort, 'desc'] }
                }, '内容'),
            ]),
        ]),
        h('div.list', {
            style: { height: totalHeight + 'px' }
        }, data.map(movieView)),
    ]);
}

let app = document.querySelector('#app')
vnode = patch(app, view(data))
render();
